<script setup lang="ts">
import useAppState from "~/hooks/useAppState";
import { categoryList, productList } from "~/mock/products";

const menuRef = ref();
const height = ref(500);

onMounted(() => {
  height.value = menuRef.value.clientHeight;
  window.addEventListener("resize", () => {
    height.value = menuRef.value.clientHeight;
  });
});

// @ts-expect-error
const menuId = ref(categoryList[0]["value"]);

const products = computed(() => {
  const { value } = menuId;
  return productList.filter((e) => value === e.category);
});

const appState = useAppState();
</script>

<template>
  <div
    class="header-nav-container"
    :class="{ 'is-active': appState.menuIsActive }"
  >
    <div class="flex header-nav-menu" ref="menuRef">
      <div class="flex-none lg:w-200px lg:mr-5vw mr-3vw">
        <div
          v-for="(item, index) in categoryList"
          :key="index"
          :class="[
            'menu-item cursor-pointer duration-200',
            item.value === menuId ? 'text-#7948ea' : 'text-#000',
          ]"
          @click="menuId = item.value"
        >
          <span>{{ item.title }}</span>
          <Icon
            name="ArrowBottom"
            :class="[
              'ml-5 duration-200',
              { '-rotate-90': item.value === menuId },
            ]"
          />
        </div>
      </div>

      <div class="flex-auto grid grid-cols-2 lg:grid-cols-3">
        <template v-for="(item, index) in products" :key="index">
          <ProductItem :source="item" class="max-w-370px mr-3 mb-5" />
        </template>
      </div>
    </div>
  </div>
</template>
<style>
.header-container {
  max-width: var(--maxWidth);
  min-height: var(--height);
  margin: 0 auto;
  z-index: 20;

  .logo-wrap {
    width: 223px;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>
